<template>
  <div class="dept-list">
    <div class="dept-top">
      <div class="dept-top-sty">
        <div class="title">
          <span>参与人</span>
          <span>(</span>
          <span>{{ itemsLength }}</span>
          <span>)</span>
        </div>
        <div class="select-title">
          已选择<span>{{ selectLength }}</span>个参与人
        </div>
      </div>
    </div>
    <div class="dept-bot">
      <!-- <radio-group class="radios" @change="radioChange">
        <view
          v-for="(item, index) in items"
          :key="item.value"
          class="uni-list-cell uni-list-cell-pd radio-group"
        >
          <view>{{ item.name }}</view>
          <view>
            <radio
              style="transform: scale(0.6)"
              color="#739ECA"
              :value="item.value"
              :checked="index === current"
            />
          </view>
        </view>
      </radio-group> -->
      <van-checkbox-group v-model="result" @change="checkboxChange">
        <van-cell-group>
          <van-cell
            v-for="(item, index) in items"
            :key="item"
            style="height: 32px;"
            clickable
            :title="item"
            @click="toggle(item, index)"
          >
            <template #right-icon>
              <van-checkbox ref="checkboxes" :name="item" shape="square" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-checkbox-group>
    </div>
    <div class="btn-style">
      <button
        class="btn"
        type="primary"
        hover-class="btn-active"
        :disabled="disabled"
        @click="handleClick"
      >
        确认
      </button>
    </div>
  </div>
</template>
<script>
import { getUserInfo } from '@/apis/project'
export default {
  data() {
    return {
      items: [],
      result: [],
      resultSX: [],
      personList: [],
      objectData: [],
      current: 0,
      techId: 0,
      itemsLength: 0,
      selectLength: 0,
      techName: '',
    }
  },
  onLoad(options) {
    // console.log(options, 'options--参与者')
    this.obj = options
  },
  mounted() {
    // 获取参与者list
    this.getCommUserList()
  },
  methods: {
    // 复选框点击触发
    checkboxChange(evt, index) {
      this.result = evt.detail
      this.selectLength = evt.detail.length
    },
    toggle(event, index) {
      this.$refs.checkboxes[index].toggle()
    },
    panduan(data) {
      this.result = []
      let flag = '0'
      // eslint-disable-next-line array-callback-return
      this.resultSX.map((key, index) => {
        if (data.id == key.id) {
          flag = '1'
          this.resultSX.splice(index, 1)
        }
      })
      if (flag == '0') {
        this.resultSX.push(data)
      }
      console.log(flag, 'flag')
      console.log(this.resultSX, 'this.resultSX')
      // eslint-disable-next-line array-callback-return
      this.resultSX.map((key) => {
        this.result.push(key.username)
      })
      console.log(this.result, 'this.')
    },
    // 设置选中数据
    setSelectItem(data) {
      for (let i = 0; i < JSON.parse(data.partData).length; i++) {
        this.result.push(JSON.parse(data.partData)[i].username)
      }
    },
    // 获取技术部负责人list
    async getCommUserList() {
      const res = await getUserInfo()
      // console.log(res.data.list, 'res.data.list')
      this.personList = res.data.list
      this.items = []
      for (let i = 0; i < res.data.list.length; i++) {
        this.items.push(res.data.list[i].username)
        // this.items.push({
        //   id: res.data.list[i].id,
        //   username: res.data.list[i].username,
        // })
      }
      this.itemsLength = this.items.length
      this.setSelectItem(this.obj)
    },
    // 提交
    handleClick() {
      this.objectData = []
      for (let i = 0; i < this.personList.length; i++) {
        for (let j = 0; j < this.result.length; j++) {
          if (this.personList[i].username == this.result[j]) {
            this.objectData.push({
              id: this.personList[i].id,
              username: this.personList[i].username,
            })
          }
        }
      }
      // console.log(this.objectData, 'this.objectData')
      try {
        uni.setStorageSync('storage_part', {
          partData: this.objectData,
          type: 'part',
        })
        uni.$emit('partPageChange', { partData: this.objectData, type: 'part' })
      } catch (e) {
        // error
      }
      uni.navigateBack({
        url: `/pages/office/project-approval/index?partData=${JSON.stringify({
          partData: this.objectData,
          type: 'part',
        })}`,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.dept-list {
  .dept-top {
    padding: 15px 0px;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.06);
    .dept-top-sty {
      width: 93%;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      .title {
        color: #000;
        font-weight: 600;
        label {
          font-size: 14px;
        }
      }
      .select-title {
        font-size: 14px;
        color: #999;
      }
    }
  }
  .dept-bot {
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.06);
    border-radius: 2px;
    width: 93%;
    margin: 0 auto;
    margin-top: 10px;
    .radios {
      // padding: 10px 0px;
      .radio-group {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px 0px 5px 0px;
        width: 93%;
        border-bottom: 1px solid #f2f2f2;
        margin: 0 auto;
        font-size: 14px;
        color: #333;
      }
    }
  }
  .btn-style {
    position: absolute;
    left: 13%;
    bottom: 2%;
    .btn {
      width: 280px;
      height: 36px;
      border-radius: 19px;
      border: none;
      font-size: 16px;
      font-weight: 400;
      color: #ffffff;
      line-height: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      &::after {
        border: none;
      }
      &[aria-disabled='true'] {
        background-color: #cccccc;
      }
      &[aria-disabled='false'] {
        background: linear-gradient(180deg, #739eca 0%, #abcde7 100%);
        &.btn-active {
          background: linear-gradient(180deg, #4d91d4 0%, #9fc8e7 100%);
        }
      }
    }
  }
}
</style>
